.Information {
    background-color: #fff;

    .Information-contain {
        @include marginCenter(70%);
    }

    .header {
        padding: 10px 0;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .main {
        padding: 20px 0;
        @include flex-between;

        .main-left,
        .main-right {
            border: 1px solid #ddd;
            box-shadow: 0 0 5px #ddd;
        }

        .main-left {
            align-self: flex-start;
            width: 17%;
        }

        .main-right {
            width: 80%;
            padding: 20px;
            overflow: hidden;

            .messageType {
                display: flex;
                margin-bottom: 10px;

                .type {
                    background: $border-color;
                    padding: 6px 25px;
                    margin-right: 15px;
                    cursor: pointer;

                }

                .currentType {
                    color: #fff;
                    background: $theme-color;

                    &:active {
                        background-color: $theme-active;
                    }
                }
            }

            .firstColumn {
                position: relative;
                padding-left: 15px;

                .noRead {
                    width: 12px;
                    height: 12px;
                    display: inline-block;
                    position: absolute;
                    bottom: 3px;
                    left: 0;
                    background-color: $theme-color;
                    border-radius: 50%;
                }
            }


            .tableHeader {
                @include flex-between;

                .title {
                    flex: 1;
                }
            }

            .pagination {
                border: 1px solid rgba(11, 11, 11, 0.2);
                border-top: unset;
                width: 100%;
                height: 43px;
                padding: 5px 0;
                margin-bottom: 10px;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
}